<script>
import { useAppStore } from '@/stores/app';
import { Button, Dialog, Field } from 'vant';
import { mapStores } from 'pinia'


const DialogComponent = Dialog.Component

export default {
  components: {
    Button,
    DialogComponent,
    Field
},
  computed: {
    ...mapStores(useAppStore),
    balanceText() {
      const text = this.appStore.balance?.toLocaleString() ?? ''
      return text.includes('.') ? text : `${text}.00`
    }
  },
  data() {
    return {
      show: false,
      withdrawAmount: 0
    }
  },
  async created() {
    this.appStore.refreshBalance()
  },
  methods: {
    handleRecharge() {
      // location.href = process.env.VUE_APP_SERVICE_URL
      this.$router.push('/add-coin')
    },
  },
}
</script>

<template>
  <div class="wallet-view">
    <img class="wallet-icon" src="../assets/icons/wallet-1.png" alt="">
    <div class="wallet-title">数字资产</div>
    <div style="display: flex; gap: 5px; align-items: baseline; margin-top: 20px;">
      <span class="wallet-balance-prefix">¥</span>
      <span class="wallet-balance">{{ balanceText }}</span>
    </div>

    <div class="wallet-buttons">
      <Button type="primary" @click="handleRecharge">链上充币</Button>
      <Button color="#f2f2f2" @click="$router.push('/withdraw-coin')">
        <span style="color: #555;">
          链上提币
        </span>
      </Button>
    </div>
  </div>
</template>

<style lang="less" scoped>
.wallet-view {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;

  .wallet-icon {
    width: 80px;
    height: 80px;
    margin-top: 80px;
  }

  .wallet-balance-prefix {
    font-size: 24px;
  }

  .wallet-balance {
    font-size: 40px;
  }

  .wallet-title {
    font-size: 20px;
    margin-top: 20px;
  }

  .wallet-buttons {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 60px;
    width: 220px;
    font-weight: bold;
  }
}
</style>
